<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <h1>注册页面</h1>
  <form action="">
      <input type="text" name="username" v-model="username" @blur="check()"  placeholder="用户名">{{info}}<br>
      <input type="text" name="password" placeholder="密码"><br>
      <input type="text" name="nickname" placeholder="昵称"><br>
      <input type="button" value="注册" @click="reg()">
  </form>
<!--引入axios和vue-->
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
      let v = new Vue({
          el:"form",
          data:{
              info:"",
              username:""
          },
          methods:{
              check:function () {
                  //let data = new FormData(document.querySelector("form"));
                /*  axios.post("/check",data).then(function (res) {
                      v.info=res.data==1? "用户名可用":"用户名不可用";
                  })*/
                  $.post("/check",{"username":v.username},function (result) {
                      v.info=result==1? "用户名可用":"用户名不可用";
                  })
              },
              reg:function (){
                  let data = new FormData(document.querySelector("form"));
                  axios.post("/reg",data).then(function (res) {
                     alert(res.data==1?"注册成功":"用户名已被占用");
                  })
              }
          }

      })

  </script>
</body>
</html>